<div th:fragment="control_condition_web_date">
	<script type="text/javascript">
		/** 时间控件元数据 */
		function metadata_web_date(params) {
			params = $.extend({}, {
				WEB_DATE : {
					startDateName : "从",
					endDateName : "至",
					startDateId : "startDate",
					endDateId : "endDate",
					showStart : "inline",
					showEnd : "inline",
					sjwd : [ {
						type : "day",
						text : "日",
						checked : "true"
					}, {
						type : "month",
						text : "月",
						checked : "true"
					}, {
						type : "year",
						text : "年",
						checked : "true"
					} ],
					defaultSjwd : "day"
				},

			}, params);
			return $.extend(new metadata_base(params), this);
		}

		/** 时间控件 元数据视图 面板视图 */
		function metadata_view_web_date(control) {
			this.WEB_DATE = function() {
				var metadataName = "WEB_DATE";
				var view = $($("#" + metadataName).html());
				var metadata = this.control.getMetadata();
				var _this = this;
				var mValue = metadata[metadataName];
				$(view).find(".control-name .control-see [name]").each(
						function(i, item) {
							var type = $(item).attr("name");
							$(item).val(mValue[type]);
							$(item).on("keyup change", function() {
								var key = $(this).attr("name");
								console.log($(".startDateContainer").parent().width()-$(".startDateContainer").width());
								mValue[key] = $(this).val();
								_this.linkageMetadata(metadataName, mValue);
							});
						});
				var sjwd = mValue.sjwd;
				var defaultSjwd = mValue.defaultSjwd;
				function showRadio(type, text){
					var radio = $(":radio[sjwd=" + type + "]");
					var td = radio.parents("td");
					 $(td).show();
					 _this.linkageMetadata(metadataName, mValue);
				}
				function hideRadio(type, text){
					var radio = $(":radio[sjwd=" + type + "]");
					var td = radio.parents("td");
					 $(td).hide();
					 _this.linkageMetadata(metadataName, mValue);
				}
				function addRadio(type, text) {
					var radioHtml = $($("#WEB_DATE_SJWD_DEFAULT").html());
					radioHtml.find("input").prop({
						"checked" : type == defaultSjwd
					}).attr({
						sjwd : type
					}).on("change",function(){
						var status = $(this).prop("checked");
						var type = $(this).attr("sjwd");
						if(status){
							mValue["defaultSjwd"]=type;
							_this.linkageMetadata(metadataName, mValue);
						}
					});
					radioHtml.find("span").html(text);
					view.find(".defaultContainer").after(radioHtml);
				}
				function removeRadio(type, text) {
					var radio = $(":radio[sjwd=" + type + "]");
					var td = radio.parents("td");
					td.remove();
				}
				$.each(sjwd, function(i, item) {
					var type = item.type;
					var text = item.text;
					var checked = item.checked;
					var sjwdHtml = $($("#WEB_DATE_SJWD").html());
					sjwdHtml.find("input").prop("checked", checked).attr(
							"sjwd", type).on("change", function() {
						var status = $(this).prop("checked");
						var type = $(this).attr("sjwd");
						mValue["sjwd"][i].checked=status;
						if (status) {
							showRadio(type, text);
						} else {
							hideRadio(type, text);
						}
					});
					sjwdHtml.find("span").html(text);
					view.find(".sjwdContainer").after(sjwdHtml);
					addRadio(type, text);
				});
				
				$(this.settingPanel).append(view);
			}

			return $.extend(new metadata_view_base(control), this);
		}

		/** 时间控件 表单视图 */
		function metadata_form_view_web_date(control) {
			this.WEB_DATE = function(value) {
				$(this.control).find(".startDateContainer").text(
						value.startDateName);
				$(this.control).find(".endDateContainer").text(
						value.endDateName);
				$(this.control).find(".startDateContainer").parent().css(
						"display", value.showStart);
				$(this.control).find(".endDateContainer").parent().css(
						"display", value.showEnd);
				var sjwd = value.sjwd;
				var myControl = $(this.control);
				$.each(sjwd, function(i, item) {
					var type = item.type;
					var text = item.text;
					var checked = item.checked;
					if(checked){
					myControl.find("a[data-setting="+type+"]").show();
					}else{
					myControl.find("a[data-setting="+type+"]").hide();
					}
				})
				var defaultSjwd = value.defaultSjwd;
				myControl.find("a[data-setting="+defaultSjwd+"]").addClass("active").siblings().removeClass('active');
			}
			return $.extend(new metadata_form_view_base(control), this);

		}
	</script>


	<!-- 控制面板 时间控件 标题 -->
	<script type="text/html" id="WEB_DATE">
<div class="form-setting-group">
	<div class="controls control-name">
		<table class="setting-control-table">
			<tr class="control-see">
				<td class="setting-control-label80"><label>名称：</label></td>
				<td class="setting-control-label100"><input name="startDateName" type="text" class="form-control" /></td>
				<td class="setting-control-label80"><label >控件ID：</label></td>
				<td class="setting-control-label100"><input type="text" name="startDateId" class="form-control" readOnly/></td>
				<td class="setting-control-label80"><label>是否启用：</label></td>
				<td class="setting-control-label100"><select name="showStart" class="form-control"><option value="inline">是</option><option value="none">否</option></select></td>
				<td></td>
			</tr>
			<tr class="control-see">
				<td class="setting-control-label80"><label>名称：</label></td>
				<td class="setting-control-label100"><input name="endDateName" type="text" class="form-control" /></td>
				<td class="setting-control-label80"><label>控件ID：</label></td>
				<td class="setting-control-label100"><input type="text" name="endDateId" class="form-control" readOnly/></td>
				<td class="setting-control-label80"><label>是否启用：</label></td>
				<td class="setting-control-label100"><select name="showEnd" class="form-control"><option value="inline">是</option><option value="none">否</option></select></td>
				<td></td>
			</tr>
	</table>
	<table>
			<tr class="control-wd">
				<td class="setting-control-label80 sjwdContainer"><label>需要显示维度：</label></td>
				<td></td>
			</tr>
			<tr class="control-wd-detail">
				<td class="setting-control-label80 defaultContainer"><label>默认值：</label></td>
				<td></td>
			</tr>
	</table>
	</div>
</div>
</script>

	<script type="text/html" id="WEB_DATE_SJWD">
	<td><input type="checkbox" name="sjwd" class="" style="width:24px;height:24px;"/><span></span></td>
</script>

	<script type="text/html" id="WEB_DATE_SJWD_DEFAULT">
	<td><input type="radio" name="defaultSjwd" class="" style="width:24px;height:24px;"/><span></span></td>
</script>

</div>
